<template>
  <div>
    <!-- 页眉 -->
    <mt-header fixed title="Vue项目练习"></mt-header>

    <!-- 中间视图 -->
    <mt-tab-container v-model="selected" id="app-container" swipeable>
      <mt-tab-container-item :id="selected">
        <router-view></router-view>
      </mt-tab-container-item>
    </mt-tab-container>

    <!-- 底部导航栏 -->
    <tabbar></tabbar>
  </div>
</template>

<script>
// 导入子组件
import tabbar from './tabbar/Tabbar.vue';

export default {
  data () {
    return {
      selected: ''
    }
  },
  components: {
    tabbar
  }
}
</script>

  <style lang="scss">
body {
  background-color: #fff;
}

#app-container {
  padding: 40px 0 55px 0;
}
</style>
